<template>
  <div class="app-container">
    <el-tabs v-if="configTypes.length>0" v-model="selectedGroup.code" class="common-tabs" @tab-click="handleTabClick">
      <el-tab-pane v-for="item in configTypes" :key="item.dataDictItemCode" :label="item.paramName" :data-id="item.id" :name="item.paramCode" />
    </el-tabs>
    <div v-if="configTypes.length==0" class="common-title">
      <h2 class="bold">{{ selectedGroup.name }}</h2>
    </div>
    <system-setting-editor :selected-group="selectedGroup" :create="false" :remove="false" />
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      code: '',
      configTypes: [],
      selectedGroup: {}
    }
  },
  watch: {
    $route(to, from) {
      this.code = to.meta.code
      this.initData()
    }
  },
  created() {
    this.code = this.$route.meta.code
    this.initData()
  },
  methods: {
    handleTabClick(tab, event) {
      this.selectedGroup = {
        ...this.selectedGroup,
        name: tab.label,
        id: tab['$attrs']['data-id']
      }
    },
    initData() {
      this.$store.dispatch('getConfigByGroupCode', this.code).then(res => {
        this.configTypes = res.children.filter(item => {
          return item.type === 0
        })
        if (this.configTypes.length > 0) {
          this.selectedGroup = {
            name: this.configTypes[0].paramName,
            code: this.configTypes[0].paramCode,
            id: this.configTypes[0].id
          }
        } else {
          this.selectedGroup = {
            id: res.record.id,
            code: res.record.paramCode,
            name: res.record.paramName
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .common-title{
    width: 100%;
    background: #fff;
    padding-left: 20px;
  }
</style>

